<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head::head"></head>
<body class="gray-bg">
<form id="ec" action="/role" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <table class="table form-table margin-bottom10">
                        <tr>
                            <td>
                                <input type="text" name="roleName" th:value="${#maps.containsKey(filters,'roleName')}? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                        <button type="button" class="btn btn-sm btn-primary create" sec:authorize="hasAuthority('role.create')">新增</button>

                    </div>

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>角色名称</th>
                            <th>角色编码</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="gradeX" th:each="item,it : ${page.list}">
                            <td class="text-center" th:text="${it.count}">11</td>
                            <td th:text="${item.roleName}">22</td>
                            <td th:text="${item.roleCode}">33</td>
                            <td th:text="${item.description}">33</td>
                            <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">33</td>
                            <td class="text-center">
                                <!-- 将id值赋值给临时属性，便于jQuery获取id-->
                                <a class="edit" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.edit')">修改</a>
                                <a class="delete" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.delete')">删除</a>
                                <a class="assignPermission" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.assgin')">分配权限</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="row" th:include="common/pagination::pagination"></div>

                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script th:inline="javascript">
    /*jQuery框架：  前端框架，主要功能： 选择器，常用函数，提交Ajax请求
    $(function(){ 相当于onload事件

    )
     */
    $(function () {
        $(".create").on("click", function () {
            opt.openWin("/role/create", "新增", 580, 430)
        });
        $(".edit").on("click", function () {
            //$(this) //this 表示当前触发时间页面元素，dom类型。￥（）将dom元素转为jQuery对象，这样就可以调用jQuery函数
            var id = $(this).attr("data-id");
            opt.openWin('/role/edit/' + id, '修改', 580, 430);
        });
        $(".delete").on("click", function () {
            //$(this) //this 表示当前触发时间页面元素，dom类型。￥（）将dom元素转为jQuery对象，这样就可以调用jQuery函数
            var id = $(this).attr("data-id");
            opt.confirm('/role/delete/' + id,"确定要删除吗？");
        });
        $(".assignPermission").on("click", function () {
            //$(this) //this 表示当前触发时间页面元素，dom类型。￥（）将dom元素转为jQuery对象，这样就可以调用jQuery函数
            var roleId = $(this).attr("data-id");
            opt.openWin('/role/assignPermission/' + roleId, '分配权限', 580, 430);
        });
    });
</script>

</body>
</html>